<template>
	<view class="bigbox">
		<view class="box3">
			<image class="xing" src="../../static/59.png" mode=""></image>
			请上传车辆资料
		</view>
		<view class="box4">
			<view @click="uploading(25)">
				<image :src="query25" mode=""></image>
				<view>登记证1和2页</view>
			</view>
			<view @click="uploading(26)">
				<image :src="query26" mode=""></image>
				<view>登记证3和4页</view>
			</view>
			<view @click="uploading(36)">
				<image :src="query36" mode=""></image>
				<view>登记证5和6页(选填)</view>
			</view>
			<view @click="uploading(27)">
				<image :src="query27" mode=""></image>
				<view>左前45度</view>
			</view>
			<view @click="uploading(28)">
				<image :src="query28" mode=""></image>
				<view>左前门和AB柱</view>
			</view>
			<view @click="uploading(29)">
				<image :src="query29" mode=""></image>
				<view>仪表盘</view>
			</view>
			<view @click="uploading(30)">
				<image :src="query30" mode=""></image>
				<view>左后门含BC柱</view>
			</view>
			<view @click="uploading(31)">
				<image :src="query31" mode=""></image>
				<view>中控操作台</view>
			</view>
			<view @click="uploading(32)">
				<image :src="query32" mode=""></image>
				<view>车顶蓬(含天窗)</view>
			</view>
			<view @click="uploading(33)">
				<image :src="query33" mode=""></image>
				<view>右后45度</view>
			</view>
			<view @click="uploading(34)">
				<image :src="query34" mode=""></image>
				<view>车身铭牌</view>
			</view>
			<view @click="uploading(35)">
				<image :src="query35" mode=""></image>
				<view>发动机舱</view>
			</view>
			<view @click="uploading(37)">
				<image :src="odata23" mode=""></image>
				<view>行驶证</view>
			</view>
			<view @click="uploading(38)">
				<image :src="odata24" mode=""></image>
				<view>前挡风左下角车架号</view>
			</view>
			<view @click="uploading(39)">
				<image :src="odata25" mode=""></image>
				<view>右前45度</view>
			</view>
			<view @click="uploading(40)">
				<image :src="odata26" mode=""></image>
				<view>左后45度</view>
			</view>
		</view>
		<view class="box5">
			<view>提交人</view>
			<input type="text" v-model="odata11" placeholder="请输入">
		</view>
		<view class="box5">
			<view>车辆所在地</view>
			<input type="text" v-model="odata12" placeholder="请输入">
		</view>
		<view class="box5">
			<view>VIN</view>
			<view class="VIN">
				<input type="text" v-model="odata13" placeholder="请输入">
				<image class="zxj" src="../../static/54.png" mode="" @click="ocr()"></image>
			</view>
		</view>
		<!-- <view class="box5">
			<view>车型名称</view>
			<view @click="che_x = 1">{{odata14?odata14:'请选择'}}</view>
		</view> -->
		<view class="box5">
			<view>首次上牌时间</view>
			<picker mode="date" :value="odata15" :start="startDate" :end="endDate" @change="bindDateChange">
				<view class="uni-input">{{odata15?odata15:'请选择'}}</view>
			</picker>
			<!-- <input type="text" v-model="odata15" placeholder="请输入"> -->
		</view>
		<view class="box5">
			<view>租赁期限</view>
			<picker @change="xiala($event)" :value="index1" :range="list1">
				<view class="uni-input">{{list1[index1]}}</view>
			</picker>
		</view>
		<view class="box5">
			<view>行驶里程</view>
			<input type="text" v-model="odata17" placeholder="请输入">万公里
		</view>
		<view class="box5">
			<view>预售价格</view>
			<input type="text" v-model="odata18" placeholder="请输入">万元
		</view>
		<!-- 19品牌20车系21年份22车型 -->
		<view class="box5">
			<view>品牌</view>
			<view @click="che_x = 1">{{odata19?odata19:'请选择'}}</view>
		</view>
		<view class="box5">
			<view>车系</view>
			<view @click="che_x = 1">{{odata20?odata20:'请选择'}}</view>
		</view>
		<view class="box5">
			<view>年份</view>
			<view @click="che_x = 1">{{odata21?odata21:'请选择'}}</view>
		</view>
		<view class="box5">
			<view style="white-space: nowrap;margin-right: 20rpx;">车型</view>
			<view @click="che_x = 1">{{odata22?odata22:'请选择'}}</view>
		</view>
		<view class="box5">
			<view>是否提交第三方评估</view>
			<picker @change="xiala1($event)" :value="index2" :range="list2">
				<view class="uni-input">{{list2[index2]}}</view>
			</picker>
		</view>
		<view class="all_btn" style="margin: 100rpx 0;" @click="tijiao()">提交</view>
		<tanchuang :scczsta='0' v-if="tc_tijiao"  @tcnr="tanchuaung_nr" @tcgb="tanchuaung_gb"></tanchuang>
		<pinpai v-if="che_x == 1" @n_data="n_data"></pinpai>
	</view>
</template>

<script>
import tanchuang from '../../component/tanchuang.vue'
import pinpai from '../../component/pinpai.vue'
export default {
	data() {
		return {
			list2:['是','否'],
			index2:0,
			list1:[],
			index1:0,
			che_x:0,
			tc_tijiao:false,
			query25: '../../static/65.png',
			query26: '../../static/66.png',
			query27: '../../static/67.png',
			query28: '../../static/67.png',
			query29: '../../static/67.png',
			query30: '../../static/67.png',
			query31: '../../static/67.png',
			query32: '../../static/67.png',
			query33: '../../static/67.png',
			query34: '../../static/67.png',
			query35: '../../static/67.png',
			query36: '../../static/67.png',
			id:'',
			odata11:'',
			odata12:'',
			odata13:'',
			odata14:'',
			odata15:'',
			odata16:'',
			odata17:'',
			odata18:'',
			odata19:'',
			odata20:'',
			odata21:'',
			odata22:'',
			odata23:'../../static/65.png',
			odata24:'../../static/67.png',
			odata25:'../../static/67.png',
			odata26:'../../static/67.png',
			odata29:'',
			odata30:'',
			odata31:'',
			odata32:'',
			odata33:'',
			odata34:'',
			odata35:'',
			odata36:'',
		};
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	components:{tanchuang,pinpai},
	onLoad:function(option){
		console.log(option)
		this.id =JSON.parse(option.item).id
		this.data_t()
		this.odata11 = uni.getStorageSync('login').username
		// console.log(uni.getStorageSync('login').username,1111)
	},
	
	methods: {
		ocr: function() {
			uni.chooseImage({
				success: chooseImageRes => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					this.img = tempFilePaths[0];
					uni.uploadFile({
						url: this.$headUrl + 'sys/common/uploadsb', //仅为示例，非真实的接口地址
						filePath: tempFilePaths[0],
						name: 'file',
						header: {
							'X-Access-Token': uni.getStorageSync('token')
						},
						formData: {
							sbtype: 'xshface'
						},
						success: res => {
							this.odata13 = JSON.parse(res.data).result.vin
							console.log(JSON.parse(res.data).result.vin);
						}
					});
				}
			});
		},
		// 数据字典
		data_t:function(){
			this.$get('sys/dict/getDictItems/' + 'zlqx').then((res)=>{
				res.data.result.forEach((item)=>{
					this.list1.push(item.title)
				})
				console.log(this.list1)
			})
		},
		xiala1: function(e) {
			console.log(e,11111)
			console.log('picker发送选择改变，携带值为', e.target.value)
			this.index2 = e.target.value
		},
		xiala: function(e) {
			console.log(e,11111)
			console.log('picker发送选择改变，携带值为', e.target.value)
			this.index1 = e.target.value
		},
		n_data:function(e){
			// <!-- 19品牌20车系21年份22车型 -->
			this.che_x = 0
			this.odata19 = e.pinpai
			this.odata20 = e.chexi
			this.odata21 = e.nianxian
			this.odata22 = e.chexin.Name
			this.odata29 = e.chexin.Displacement
			this.odata30 = e.chexin.ID
			this.odata31 = e.chexin.Name
			this.odata32 = e.chexin.Price
			this.odata33 = e.chexin.TransmissionType
			this.odata34 = e.chexin.VersionYear
			this.odata35 = e.chexin.VersionDate
			this.odata36 = e.chexin.ProductionYear
			// this.odata14 = 
		},
		bindDateChange: function(e) {
			this.odata15 = e.target.value
		},
		bindDateChange1: function(e) {
			this.odata16 = e.target.value
		},
		tanchuaung_gb:function(data){
			this.tc_tijiao = false;
		},
		tanchuaung_nr:function(data){
			this.tj()
			this.$post('buse/fxjBuse_02/addFxjBuseitem_09',{
				rid:this.id,
				query02:data.spjg,
				query03:data.spyj,
				query05:data.nbyj
			}).then((res)=>{
				console.log(res.data,7777)
				if(res.data.success){
					this.tc_tijiao = false;
					uni.showToast({
						title:'提交成功',
						icon:'none'
					})
					setTimeout(()=>{
						uni.navigateBack({
						    delta: 1
						});
					},1000)
				}else if(!res.data.success){
						uni.showToast({
							title: res.data.message,
							icon:'none'
						})
					}
			})
		},
		tijiao:function(){
			this.tc_tijiao = true
		},
		uploading: function(index) {
			uni.chooseImage({
				success: chooseImageRes => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					this.img = tempFilePaths[0];
					uni.uploadFile({
						url: this.$headUrl + 'sys/common/upload',
						filePath: tempFilePaths[0],
						name: 'file',
						header: {
							'X-Access-Token': uni.getStorageSync('token')
						},
						success: res => {
							console.log(JSON.parse(res.data));
							if (JSON.parse(res.data).success) {
								if (index == 25) {
									this.query25 = JSON.parse(res.data).message;
								} else if (index == 26) {
									this.query26 = JSON.parse(res.data).message;
								} else if (index == 27) {
									this.query27 = JSON.parse(res.data).message;
								} else if (index == 28) {
									this.query28 = JSON.parse(res.data).message;
								} else if (index == 29) {
									this.query29 = JSON.parse(res.data).message;
								} else if (index == 30) {
									this.query30 = JSON.parse(res.data).message;
								} else if (index == 31) {
									this.query31 = JSON.parse(res.data).message;
								} else if (index == 32) {
									this.query32 = JSON.parse(res.data).message;
								} else if (index == 33) {
									this.query33 = JSON.parse(res.data).message;
								} else if (index == 34) {
									this.query34 = JSON.parse(res.data).message;
								} else if (index == 35) {
									this.query35 = JSON.parse(res.data).message;
								} else if (index == 36) {
									this.query36 = JSON.parse(res.data).message;
								} else if (index == 37) {
									this.odata23 = JSON.parse(res.data).message;
								} else if (index == 38) {
									this.odata24 = JSON.parse(res.data).message;
								} else if (index == 39) {
									this.odata25 = JSON.parse(res.data).message;
								} else if (index == 40) {
									this.odata26 = JSON.parse(res.data).message;
								} 
							}
						}
					});
				}
			});
		},
		// 提交
		tj: function() {
			let	dat = {
				id:this.id,
				query25: '',
				query26: '',
				query27: '',
				query28: '',
				query29: '',
				query30: '',
				query31: '',
				query32: '',
				query33: '',
				query34: '',
				query35: '',
				query36: '',
				odata11:this.odata11,
				odata12:this.odata12,
				odata13:this.odata13,
				odata14:this.odata14,
				odata15:this.odata15,
				odata16:this.list1[this.index1],
				odata17:this.odata17,
				odata18:this.odata18,
				odata18:this.odata18,
				odata19:this.odata19,
				odata20:this.odata20,
				odata21:this.odata21,
				odata22:this.odata22,
				odata23:'',
				odata24:'',
				odata25:'',
				odata26:'',
				odata29:this.odata29,
				odata30:this.odata30,
				odata31:this.odata31,
				odata32:this.odata32,
				odata33:this.odata33,
				odata34:this.odata34,
				odata35:this.odata35,
				odata36:this.odata36,
				odata38:this.list2[this.index2],
				}
			if(this.query25 != '../../static/65.png'){dat.query25 = this.query25}
			if(this.query26 != '../../static/66.png'){dat.query26 = this.query26}
			if(this.query27 != '../../static/67.png'){dat.query27 = this.query27}
			if(this.query28 != '../../static/67.png'){dat.query28 = this.query28}
			if(this.query29 != '../../static/67.png'){dat.query29 = this.query29}
			if(this.query30 != '../../static/67.png'){dat.query30 = this.query30}
			if(this.query31 != '../../static/67.png'){dat.query31 = this.query31}
			if(this.query32 != '../../static/67.png'){dat.query32 = this.query32}
			if(this.query33 != '../../static/67.png'){dat.query33 = this.query33}
			if(this.query34 != '../../static/67.png'){dat.query34 = this.query34}
			if(this.query35 != '../../static/67.png'){dat.query35 = this.query35}
			if(this.query36 != '../../static/67.png'){dat.query36 = this.query36}
			if(this.odata23 != '../../static/65.png'){dat.odata23 = this.odata23}
			if(this.odata24 != '../../static/67.png'){dat.odata24 = this.odata24}
			if(this.odata25 != '../../static/67.png'){dat.odata25 = this.odata25}
			if(this.odata26 != '../../static/67.png'){dat.odata26 = this.odata26}
			this.$put('buse/fxjBuse_02/edit',dat).then(res => {
				console.log(res.data)
				if(res.data.success){
					// uni.showToast({
					// 	title:'提交成功',
					// 	icon:'none'
					// })
					// setTimeout(()=>{
					// 	uni.navigateBack({
					// 	    delta: 1
					// 	});
					// },1000)
				}
			});
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		}
	}
};
</script>

<style>
.VIN>input{
	text-align: right;
}
.VIN{
	display: flex;
	justify-content: center;
	align-items: center;
}
.zxj {
	width: 37rpx;
	height: 32rpx;
	margin-left: 20rpx;
}
.box5>input{
	text-align: right;
	font-size:30rpx;
}
.box5{
	height:88rpx;
	background:rgba(250,250,250,0.3);
	border:1px solid rgba(230,230,230,1);
	border-radius:10rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20rpx;
	box-sizing: border-box;
	font-size:30rpx;
	font-family:PingFang SC;
	font-weight:500;
	color:rgba(0,0,0,1);
	margin-top: 20rpx;
}
.box4 > view > image {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.box4 > view > view {
	margin-top: 110rpx;
}
.box4 > view {
	width: 316rpx;
	height: 211rpx;
	font-size: 22rpx;
	font-family: Microsoft YaHei;
	font-weight: 400;
	color: #666666;
	margin-bottom: 40rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 10;
}
.box4 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
.xing {
	width: 12rpx;
	height: 14rpx;
	margin-right: 15rpx;
}
.box3 {
	font-size: 22rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(102, 102, 102, 1);
	margin: 10rpx 0 40rpx 0;
}
.box2_3 {
	/* width:64rpx;
		height:54rpx; */
	padding: 10rpx 20rpx;
	box-sizing: border-box;
	border: 1px solid rgba(153, 153, 153, 1);
	border-radius: 10rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 20rpx;
}
.box2_2 > input {
	text-align: right;
	font-size: 30rpx;
}
.box2_2 {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.zxj {
	width: 37rpx;
	height: 32rpx;
	margin-left: 20rpx;
}
.box2_head {
	white-space: nowrap;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
}
.box2_1 {
	height: 88rpx;
	border-bottom: 1px solid #eeedf2;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.fot1 {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: rgba(51, 51, 51, 1);
}
.box2 {
	padding: 30rpx;
	padding-bottom: 0;
	box-sizing: border-box;
}
.line {
	height: 20rpx;
	background: #eeedf2;
}
.active {
	background: #4185f5;
	border: 1rpx solid #4185f5 !important;
	border-radius: 10rpx;
	color: #ffffff !important;
}
.box1_r > view {
	/* width:86rpx;
		height:44rpx; */
	padding: 10rpx 20rpx;
	box-sizing: border-box;
	border: 1rpx solid rgba(153, 153, 153, 1);
	border-radius: 10rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 10rpx;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
}
.box1_r {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.box1 {
	height: 100rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30rpx;
	box-sizing: border-box;
}
.bigbox {
	padding: 30rpx;
	box-sizing: border-box;
}
</style>
